<!-- reportingResults -->
<template>
    <van-loading  type="spinner"  style="transform: translateY(45vh) !important;" v-if="Loading"
    >加载中...</van-loading>
    <div class="page" v-else>
        <div class="pageHeader" :style="{'marginTop':getStatusBarHeight()}">
            <div class="pageHeaderd"  @click="goBack()">
                <img src="../../assets/jst/f.png" alt="">
            </div>
            <div class="pageHeaderd"  style=" display: flex; justify-content: center;" @click="getKf()">
                <img src="../../assets/jst/k.png" alt="" v-log-button-name="'保单检视_个人工作台_智能客户'"> 
            </div>
        </div>
        <div class="t"> 
            <div class="pageTitle"> 
                <div class="titleSection">
                    <div class="ybc" @click="goJst(0)" v-log-button-name="'保单检视_个人工作台_查看保单检视报告'">
                        <div class="tttt">{{jstList.jstFinTaskCount}}</div>
                        <img src="../../assets/jst/b.png" alt="">
                        <div class="b">已保存报告</div>
                        <div>查看保单检视报告</div>
                    </div>
                    <div class="line"></div>
                    <div class="dcl" @click="goJst(1)" v-log-button-name="'保单检视_个人工作台_查看待保存报告'">
                        <div class="tttt">{{jstList.jstDoiTaskCount}}</div>
                        <img src="../../assets/jst/c.png" alt="">
                        <div class="b">待保存报告</div>
                        <div>查看未保存报告</div>
                    </div>
                </div>
            </div>
            <div class="tleButton" @click="goJst(3)" v-log-button-name="'保单检视_个人工作台_历史记录'">查看历史记录</div>
        </div>
        <!-- 常见问题 -->
        <div class="customerProject">
            <div class="projectTop">常见问题</div>
            <div class="project"  v-for="(v,b) in porjectList" :key="b">
                <div class="projectList" @click="projectRoyte(v)" v-log-button-name="'保单检视_个人工作台_常见问题'">
                    <div class="projectListDv">
                        <img src="../../assets/img/wtt.png" alt="">
                        <div>{{v.problemName}}</div>
                    </div>
                    <img :class="v.isShow?'projectListMg':'projectListMg1'" src="../../assets/img/xll.png" alt="">
                </div>
                <div class="projectBtoom" v-if="v.isShow">{{v.problemDescribe}}</div>
            </div>
        </div>
        <!-- 温馨提示 -->
        <div class="wxts" v-if="wxtShow">
            <div class="sect">
                <img class="d" src="../../assets/jst/z.png" alt="">
                <div class="title"> 温馨提示 </div>
                <!-- <div class="zwq">
                    该服务暂时处于<span>试运行阶段</span>，当前我们仅和部分保险机构合作开展定向客户邀请，暂未查询到您的保单检视报告。敬请期待正式上线。
                </div> -->
                <div class="zwq">{{w.split('s')[0]}}
                    <span>{{w.split('s')[1]}}</span>
                    {{w.split('s')[2]}}</div>
                <div class="tbu">
                    <div @click="wxt()">确定</div>
                </div>
            </div>
        </div>
    </div>
</template>

<!-- less嵌套设置 -->
<style lang="less" scoped>
.page {
    width: 100%;
    height: 100vh;
    overflow: scroll;
    background: linear-gradient( 0, #F5F7FA 63%, #2792FC 80%, #0280FF 100%);
    .wxts {
        top: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        position: absolute;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, .7);
        .sect {
            width: 311px;
            height: 257px;
            border-radius: 10px;
            background: linear-gradient( 180deg, #B8DBFF 0%, #C7E3FE 7%, #D8ECFF 14%, #E8F3FE 20%, #F7FBFF 27%, #FFFFFF 38%, #FFFFFF 64%, #FFFFFF 100%);
            .tbu {
                width: 100%;
                display: flex;
                justify-content: center;
                div {
                    top: -47px;
                    width: 30%;
                    color: #fff;
                    padding: 7px 10px;
                    border-radius: 30px;
                    position: relative;
                    background: #0280FF;
                }
            }
            .zwq {
                top: -57px;
                padding: 0 17px;
                text-align: left;
                position: relative;
                color: rgba(0,0,0,0.6);
                span {
                    color: #181819;
                    font-weight: bold;
                }
            }
            .d {
                top: -47px;
                width: 187px;
                height: 130px;
                margin: 0 auto;
                position: relative;
            }
            .title {
                top: -73px;
                font-size: 17px;
                color: #181819;
                font-weight: bold;
                position: relative;
            }
        }
    }
    .customerProject {
            // width: 351px;
            width: 93%;
            padding: 10px;
            text-align: left;
            min-height: 270px;
            border-radius: 13px;
            background: #FFFFFF;
            // margin: 17px 0 0 13px;
            margin: 0 auto;
            margin-top: 17px;
            .projectTop {
                font-size: 17px;
                color: #222222;
                font-weight: bold;
            }
            .project {
                background: #FFFFFF;
                .projectList {
                    height: 37px;
                    display: flex;
                    padding: 0 10px;
                    font-size: 13px;
                    margin-top: 13px;
                    font-weight: bold;
                    border-radius: 13px;
                    align-items: center;
                    justify-content: space-between;
                    .projectListDv {
                        display: flex;
                        align-items: center;
                        img {
                            width: 18px;
                            height: 18px;
                        }
                        div {
                            margin-left: 10px;
                        }
                    }
                    .projectListMg {
                        width: 23px;
                        height: 23px;
                    }
                    .projectListMg1 {
                        width: 23px;
                        height: 23px;
                        transform: rotate(270deg);
                    }
                }
                .projectBtoom {
                    display: flex;
                    padding: 0 10px 8px 13px;
                    font-size: 13px;
                    align-items: center;
                    justify-content: space-between;
                }
            }
        }
    .t {
        width: 93%;
        height: 190px;
        margin-left: 3.5%;
        border-radius: 8px;
        background: #DDEEFF;
        .pageTitle {
            display: flex;
            justify-content: center;
            .titleSection {
                width: 100%;
                height: 140px;
                display: flex;
                border-radius: 9px;
                align-items: center;
                background: #FFFFFF;
                box-shadow: 0px 2 4px 0px rgba(4,76,148,0.06);
                .ybc {
                    width: 49%;
                    margin-top: 8px;
                    position: relative;
                    .tttt {
                        top: -13px;
                        right: 37px;
                        height: 23px;
                        min-width: 30px;
                        font-size: 13px;
                        color: #FFFFFF;
                        line-height: 23px;
                        border-radius: 30%;
                        text-align: center;
                        position: absolute;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        background: linear-gradient( 223deg, #FF3734 0%, #FD3734 34%, #FF7610 100%);
                    }
                    img {
                        width: 70px;
                        height: 60px;
                        margin: 0 auto;
                    }
                    .b{
                        font-size: 18px;
                        color: #31313B;
                        font-weight: bold;
                    }
                    div:last-child{
                        font-size: 13px;
                        color: #A3A4A8;
                        margin-top: 4px;
                    }
                }
                .line {
                    width: 1px;
                    height: 100px;
                    background: #D8D8D8;
                }
                .dcl {
                    width: 49%;
                    margin-top: 8px;
                    position: relative;
                    .tttt {
                        top: -13px;
                        right: 27px;
                        width: 30px;
                        height: 23px;
                        font-size: 13px;
                        color: #FFFFFF;
                        line-height: 23px;
                        border-radius: 30%;
                        text-align: center;
                        position: absolute;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        background: linear-gradient( 223deg, #FF3734 0%, #FD3734 34%, #FF7610 100%);
                    }
                    img {
                        width: 70px;
                        height: 60px;
                        margin: 0 auto;
                    }
                    .b{
                        font-size: 18px;
                        color: #31313B;
                        font-weight: bold;
                    }
                    div:last-child{
                        font-size: 13px;
                        color: #A3A4A8;
                        margin-top: 4px;
                    }
                }
            }
        }
        .tleButton {
            color: #198AFA;
            font-size: 17px;
            margin-top: 13px;
            font-weight: 500;
            text-align: center;
        }
    }
    .pageHeader {
        width: 97%;
        display: flex;
        height: 140px;
        margin-top: 47px;
        padding-left: 10px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        justify-content: space-between;
        background-image: url(../../assets/jst/jstbjch.png);
        .pageHeaderd {
            width: 50px;
            height: 50px;
        }
        img {
            width: 23px;
            height: 23px;
        }
    }
}
:deep(.van-share-sheet__option) {
    margin: 0 auto;
}
</style>
<script lang="ts" setup name="reportshare">
import { useRouter, useRoute } from "vue-router"
import { Toast } from '/@/utils/Message';
import { onMounted } from "vue"
import { reactive, ref } from 'vue'
import { jstJointLogin, jstTaskList, getProblemIn, customerServiceUrl, jstCommonPromptText, historicalTask} from "/@/api/jst/h.ts"

const router = useRouter()
const route = useRoute()
const titleTest = ref("邀请客户")
let data = reactive({
   ...route.query
});
const porjectList = ref([])
const projectRoyte = (v:any) => {
    v.isShow = !v.isShow
}
const Loading = ref<boolean>(true);
let wxtShow = ref<boolean>(false)
const wxt = () => {
    wxtShow.value = false
    sessionStorage.setItem('wxtShow', 'false')
}
let jstList:any = ref({})
let kfUrl:any = ref('')
const w = ref('')
const token:any = ref('eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJqc3QiLCJpYXQiOjE3MzAwODQ0NjUsImV4cCI6MTczMjY3NjQ2NSwic2VydmljZUlkcyI6IiIsImNsaWVudElkIjoiIiwibmlja05hbWUiOiIq5rqQIiwic2NvcGUiOm51bGwsImNoYW5uZWwiOiJqc3QiLCJleHRlcm5hbElkIjpudWxsLCJ0eXBlIjoiYWNjZXNzIiwidXNlcklkIjoiYTNmMWQzZWUwYThmNDY2ZmFhZjllNmI5YmJhNzNiYjciLCJjaGFubmVsQ29kZSI6MH0.196Z68hcZE-cJBK7b8_1oYs_VhtUKl-f4Ti6veUaGvI')
const getKf = () => {
    router.push({ path: '/jstKf',query: { url: kfUrl.value}})
    // window.location.href = kfUrl.value
}
const goJst = (v:any) => {
    router.push({ path: '/jstTask',query: { type: v}})
}
const goBack = () => {
    // router.go(-1)
    var objq = {
        method: 'pushBack',
        data: {}
    }
    if(navigator.userAgent.indexOf("JinShiTong_iOS") !== -1){
        (window as any).webkit.messageHandlers.interactive.postMessage(objq);
    } else if (navigator.userAgent.indexOf("JinShiTong_Android")!== -1){ 
        //interactive 安卓端定义的类名 postMessage 安卓端定义的方法名
        (window as any).interactive.postMessage(JSON.stringify(objq))
    }
}
// 获取高度
let getStatusBarHeight = () => {
    const ua = navigator.userAgent
    const andoridUAIndex = ua.indexOf('JinShiTong_Android')
    if(andoridUAIndex !== -1 && ua.split('JinShiTong_Android').length == 2){
        const height = ua.split('JinShiTong_Android')[1]
        // console.log(`${+height /2}px`,'安卓导航栏高度')
        console.log(ua.split('JinShiTong_Android'))
        return`${+height /2}px`
    }
    const iosUAIndex = ua.indexOf('JinShiTong_iOS')
    if(iosUAIndex !==-1 && ua.split('JinShiTong_iOS').length == 2){
        const height = ua.split('JinShiTong_iOS')[1]
        return `${+height}px`
    }
    console.log(`20px`,'导航栏高度')
    return '20px'
}
onMounted(async()=>{
    localStorage.removeItem('policyList');
    Loading.value = true;
    sessionStorage.setItem('jstHeaderHeight',JSON.stringify(getStatusBarHeight()))
    let b = await jstCommonPromptText(0);
    w.value = b.data
    // let c = await jstJointLogin({token:token.value});
    // if(c.code == 200){
        sessionStorage.setItem('JSTFLAG', '100')
        // sessionStorage.setItem('jstJointLoginVo',JSON.stringify(c.jstJointLoginVo))
        let d = await jstTaskList(sessionStorage.getItem('jstJointLoginVo'));
        if(d.code == 200) {
            jstList.value = d
            Loading.value = false
            let z = await historicalTask(sessionStorage.getItem('jstJointLoginVo'));
            if( d.jstDoiTaskCount == 0 && d.jstFinTaskCount == 0 && z.historicRecords.length == 0 && !Boolean(sessionStorage.getItem('wxtShow'))) {
                wxtShow.value = true
            }
        }
    // }
    let z = await getProblemIn()
    if (z.code == 200) {
        porjectList.value = z.data
    }
    let k = await customerServiceUrl()
    if (k.code == 200) {
        kfUrl.value = k.data
    }
    Loading.value = false;
})
</script>


